<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<title>我的日程</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="description" content="北京规划院 移动办公 OA 自动化">
		<link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
		<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.1.1/css/jquery-weui.min.css">
		<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" href="css/date.css" />
		<%
		    String userid=(String)request.getAttribute("loginuser");
		%>
		<style>
			.weui-navbar {
				width: 70%;
				margin-left: 15%;
				margin-top: 5px;
				margin-bottom: 10px;
				border: 1px solid #ddd;
				border-radius: 30px;
			}
			
			.weui-navbar__item {
				padding: 3px 0;
				cursor: pointer;
			}
			
			#pub_room.weui-bar__item--on {
				border-bottom-left-radius: 30px;
				border-top-left-radius: 30px;
			}
			
			#pri_room.weui-bar__item--on {
				border-bottom-right-radius: 30px;
				border-top-right-radius: 30px;
			}
			
			.weui-navbar:after {
				border: 0;
			}
			
			#container .weui-cells {
				margin: 3px auto !important;
				margin-left: 1.5%;
				width: 95%;
				border-radius: 5px;
			}
		</style>
	</head>

	<body>
		<div class="page" id="container">
			<div class="weui-tab">
				<div class="weui-tab__bd">
					<div class="wrapper02" id="demo06">
						<div class="scroller">
							<ul class="clearfix">

							</ul>
						</div>
					</div>
					<div id="details">
						<div class="left" style="margin-top: 1.5em;">
							<ul>
								<li>上午<br />(9:00~12:00)</li>
								<li>下午一<br />(14:00~18:00)</li>
							</ul>
						</div>
						<div class="right">
							<table cellspacing="" cellpadding="">
								<tr>
									<td id="morning"></td>
								</tr>
								<tr>
									<td id="afternoon"></td>
								</tr>
							</table>
						</div>
					</div>
					<div class="weui-flex" id="describe">
						<div class="weui-flex__item">
							<i></i>
							<span class="placeholder">已占有</span>
						</div>
						<div class="weui-flex__item">
							<i style="background: #EC8B89;"></i>
							<span class="placeholder">我相关的</span>
						</div>
					</div>

				</div>

				<div class="weui-tabbar">
					<a href="meetroomnav" class="weui-tabbar__item">
						<!--<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>-->
						<div class="weui-tabbar__icon">
							<i class="fa fa-map" style="font-size: 24px;"></i>
						</div>
						<p class="weui-tabbar__label">会议室</p>
					</a>
					<a href="rcnav" class="weui-tabbar__item  weui-bar__item--on">
						<div class="weui-tabbar__icon">
							<i class="fa fa-calendar" style="font-size: 24px;"></i>
						</div>
						<p class="weui-tabbar__label">日程</p>
					</a>
					<a href="ordernav" class="weui-tabbar__item">
						<div class="weui-tabbar__icon">
							<i class="fa fa-edit" style="font-size: 24px;"></i>
						</div>
						<p class="weui-tabbar__label">创建</p>
					</a>
					<a href="meetselfnav" class="weui-tabbar__item">
						<div class="weui-tabbar__icon">
							<i class="fa fa-user" style="font-size: 24px;"></i>
						</div>
						<p class="weui-tabbar__label">我</p>
					</a>
				</div>
			</div>
		</div>
		<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/jquery-weui/1.1.1/js/jquery-weui.min.js"></script>
		<script src="js/flex.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/navscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/date.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var mdata = [];
			$.ajaxSettings.async = false;
			$.post("rcnav",function(data) {
				mdata = data
			})
			$.ajaxSettings.async = false;
			var myDate = new Date();
			var date = myDate.getDate();
			program(date)

			function getnum(time) {
				var a = time.split("T")[0].split("-");
				return a[2]
			}

			function gethour(time) {
				var a = time.split("T")[1].split(":");
				return a[0]
			}
			$('.clearfix').on('click', 'li', function() {
				$("#afternoon,#morning").html("")
				$("#afternoon,#morning").removeClass("otherusing")
				$("#afternoon,#morning").removeClass("select")
				var date = $(this).attr("data-day");
				program(date)
			})

			function program(date) {
				for(var i = 0; i < mdata.length; i++) {
					var num = getnum(mdata[i].starttime)
					if(num == date) {
						var html = "";
						html += '<div class="weui-panel">'
						html += '<div class="weui-panel__bd">'
						html += '<div class="weui-media-box weui-media-box_text">'
						html += '<h4 class="weui-media-box__title">' + mdata[i].topic + '</h4>'
						html += '<p class="weui-media-box__desc">' + mdata[i].meetbz + '</p>'
						html += '</div>'
						html += '</div>'
						html += '</div>'
						var hour1 = gethour(mdata[i].starttime);
						var hour2 = gethour(mdata[i].finishtime);
						if(hour1 < 12) {
							$("#morning").html(html)
							$("#morning").addClass("otherusing")

						} else {
							$("#afternoon").html(html)
							$("#afternoon").addClass("otherusing")

						}
						if(hour2 > 12) {
							$("#afternoon").html(html)
							$("#afternoon").addClass("otherusing")

						} else {
							$("#morning").html(html)
							$("#morning").addClass("otherusing")

						}
					}

				}
			}
		</script>

	</body>

</html>